import React, {Component} from 'react';
import {Table,Image,Button,Modal,Form,Input} from 'antd';
const api = 'http://192.168.2.238:8770';

class EditableTable extends Component{
    constructor(props) {
        super(props);
        this.state={
            goods:[],
            data:this.props.mydata,
            setIsModalVisible:false,
            layout:{
                labelCol:{
                    span:8
                },
                wrapperCol:{
                    span:16
                }
            },
            tailLayout:{
                wrapperCol: {
                    offset:8,
                    span:16,
                }
            },
            name:'',
        }
    }
    handleOk = () => {
        this.setState({
            setIsModalVisible:false
        })
    };
    handleCancel = () =>{
        this.setState({
            setIsModalVisible:false
        })
    };
    xiangqing (e){
        this.setState({
            goods:e,
            setIsModalVisible:true
        })
    }
    componentWillReceiveProps(nextProps, nextContext) {
        this.setState({
            data:nextProps.mydata
        })
    }
    goodsName(e){
        console.log(e.target.value);
        this.setState({
            name:e.target.value
        })
    }
    render() {
        let columns = [
            {
                title:'商品名称',
                key:1,
                dataIndex:'goods_name',
                align: 'center',
                editable: true,
            },
            {
                title:'库存',
                key:2,
                dataIndex:'goods_inventory',
                align: 'center',
                editable: true,
            },
            {
                title:'商品价',
                key:3,
                dataIndex:'goods_original_price',
                align: 'center',
                editable: true,
            },
            {
                title:'商品图片',
                key:4,
                dataIndex:'goods_home_img_url',
                editable: false,
                render:() =><Image src={api+this.props.mydata[0].goods_home_img_url} width='100px' height='100px'/>,
                align: 'center'
            },
            {
                title:'访问量',
                key:5,
                dataIndex:'goods_view',
                align: 'center',
                editable: true,
            },
            {
                title:'促销价',
                key:6,
                dataIndex:'goods_promotion',
                align: 'center',
                editable: true,
            },
            {
                title:'已售出',
                key:7,
                dataIndex:'goods_sell_sum',
                align: 'center',
                editable: true,
            },
            {
                title:'创建时间',
                key:8,
                dataIndex:'merchant_join_date',
                align: 'center',
                editable: true,
            },
            {
                title: '操作',
                key:9,
                width:'150px',
                align: 'center',
                render: (e) =>(
                    <div style={{width:'100%'}}>
                        <Button type="primary" size='small' onClick={this.xiangqing.bind(this,e)}>
                            详情
                        </Button>
                        <Button style={{marginLeft:10}} type="primary" size='small'>下架</Button>
                    </div>
                )
            }
        ];
        return (
            <div>
                <Table
                    columns={columns}
                    dataSource={this.state.data}
                    bordered
                    rowKey={(record)=>`complete${record.goods_id}`}
                    pagination={{pageSize:3,position:['bottomCenter']}}
                />
                <Modal
                    title="商品详情"
                    visible={this.state.setIsModalVisible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}>
                    商品名称:<Input value={this.state.goods.goods_name} onChange={this.goodsName.bind(this)}/>
                    创建时间:<Input value={this.state.goods.goods_create_time}/>
                    首页大图:<Image src={api+this.state.goods.goods_home_img_url} width='100px' height='100px'/><br/>
                    库存:<Input value={this.state.goods.goods_inventory}/>
                    商品原价:<Input value={this.state.goods.goods_original_price}/>
                    促销价:<Input value={this.state.goods.goods_promotion}/>
                    商品状态:<Input value={this.state.goods.goods_shelves_name}/>
                    访问量:<Input value={this.state.goods.goods_view}/>
                    商家名称:<Input value={this.state.goods.merchanr_name}/>
                    商家注册成功时间:<Input value={this.state.goods.merchant_join_date}/>
                    商家所在地:<Input value={this.state.goods.merchant_site}/>
                    商品审核状态:<Input disabled={true} value={this.state.goods.review_status_name}/>
                </Modal>
            </div>
        );
    }
}
export default EditableTable